<template>
    <div class="market-container">
        <router-link tag="div" to="/circle" class="circle-box market-box shadow">
            <span class="circle-icon"></span>
            <h3>圈子</h3>
            <p>优先购买懂行最新、最热的圈子</p>
            <span class="next-icon"></span>
        </router-link>
        <router-link tag="div" to="/listen" class="listen-book-box market-box shadow">
            <span class="circle-icon"></span>
            <h3>每日听书</h3>
            <p>分享书籍音频凝聚更多潜在用户</p>
            <span class="next-icon"></span>
        </router-link>
        <router-link tag="div" to="/micro" class="micro-speak-box market-box shadow">
            <span class="circle-icon"></span>
            <h3>微说</h3>
            <p>分享知名讲师的在线课程</p>
            <span class="next-icon"></span>
        </router-link>
        <router-link v-if="level == 1 || level == 2" tag="div" to="/vip" class="vip-card-box market-box shadow">
            <span class="circle-icon"></span>
            <h3>听书VIP卡</h3>
            <p>预约购买每日听书VIP年费实体卡</p>
            <span class="next-icon"></span>
        </router-link>
        <!-- <router-view></router-view> -->
        <com-footer :currentIndex="cuIndex"></com-footer>
    </div>
</template>
<script>
    import comFooter from '../../components/comFooter'
    export default {
        components: {
            comFooter
        },
        data () {
            return {
                cuIndex: 0,
                level: ''
            }
        },
        created () {
            this.level = localStorage.getItem('dongHang_data') ? JSON.parse(localStorage.getItem('dongHang_data')).level : -1
        }
    }
</script>
<style lang="less" scoped>
    .market-container {
        padding: 0.3rem;
        height: 100vh;
        box-sizing: border-box;
        .market-box {
            box-sizing: border-box;
            height: 1.4rem;
            padding: 0 0.3rem;
            font-size: 0.24rem;
            line-height: 1.4rem;
            margin-bottom: 0.28rem;
            .next-icon {
                float: right;
                width: 0.12rem;
                height: 0.2rem;
                background: url(../../assets/img/next-icon.png) no-repeat;
                background-size: 100%;
                margin-top: 0.62rem;
            }
            h3 {
                display: inline-block;
                margin-left: 0.3rem;
                font-size: 0.32rem;
                width: 1.5rem;
            }
            p{
                display: inline-block;
                color: #282828;
                font-size: 0.24rem;
            }
        }
        .circle-box {
            .circle-icon {
                float: left;
                width: 0.5rem;
                height: 0.5rem;
                background: url(../../assets/img/circle-icon.png) no-repeat;
                background-size: 100%;
                margin-top: 0.44rem;
            }
        }
        .listen-book-box {
            .circle-icon {
                float: left;
                width: 0.5rem;
                height: 0.48rem;
                background: url(../../assets/img/listen-book-icon.png) no-repeat;
                background-size: 100%;
                margin-top: 0.46rem;
            }
        }
        .micro-speak-box {
            .circle-icon {
                float: left;
                width: 0.5rem;
                height: 0.54rem;
                background: url(../../assets/img/micro-speak-icon.png) no-repeat;
                background-size: 100%;
                margin-top: 0.44rem;
            }
        }
        .vip-card-box {
            .circle-icon {
                float: left;
                width: 0.5rem;
                height: 0.48rem;
                background: url(../../assets/img/vip-card-icon.png) no-repeat;
                background-size: 100%;
                margin-top: 0.46rem;
            }
        }
    }
</style>